<template>
<div class="navigation">
    <!--这个class名：pagination让我的分页内容消失了,swiper修改了样式display:none ,样式在default.css中-->
    <!--暂时只是修改了样式，不使用swiper中的效果，将类pagination改为了myPagination，分页样式default中也做了相应修改-->
    <div class="myPagination" style="display:inline">
        <div class="list-page">
            <ul class="post-data">
                <li><span class="rows">共有{{pageInfo.total}}条记录</span></li>
            </ul>
        </div>

        <ul>
            <li>
                <a class="first" href="javascript:void(0);"  @click="changePage('pageNum=1')">首页</a> 
            </li>
            <li>
                <a v-if="pageInfo.hasPreviousPage" class="prev" href="javascript:void(0);"
                @click="changePage('pageNum='+pageInfo.prePage)">上一页</a>
                <a v-if="!pageInfo.hasPreviousPage" class=" not-allowed prev">上一页</a>
            </li>
            <li v-for="nav in pageInfo.navigatepageNums"  :key="nav+90"  :class="navIsPageNum(nav , pageInfo.pageNum)">
                <span v-if="nav == pageInfo.pageNum">{{nav}}</span>                
                <a v-if="nav != pageInfo.pageNum" class="num" href="javascript:void(0);" 
                @click="changePage('pageNum='+nav)">{{nav}}</a>
            </li>
            <li>
                <a v-if="pageInfo.hasNextPage" class="next" href="javascript:void(0);"
                @click="changePage('pageNum='+pageInfo.nextPage)">下一页</a>
                <a v-if="!pageInfo.hasNextPage" class="not-allowed next">下一页</a>
            </li>
            <li>
                <a class="end" href="javascript:void(0);" @click="changePage('pageNum='+pageInfo.pages)">尾页</a>
            </li>
        </ul> 
    </div>
</div>
<!-- <div><h1>我的子组件</h1></div> -->
</template>

<script>
export default {
    props: ["blogPageInfo"],
    name:'page',
    data() {
       return {
           /** 
            * 当前页(pageNum)，每页数量(pageSize)，当前页数量(size)，startRow,endRow,总页数(pages)
            * 前一页(prePage),下一页(nextPage),是否为第一页(isFirstPage),是否为最后一页(isLastPage)
            * 是否有前一页(hasPreviousPage),是否有下一页(hasNextPage),导航页码数(navigatePages)
            * 所有导航页码(navigatepageNums[]),导航条上的第一页(navigateFirstPage),..最后一页(navigateLastPage)
            * */

           pageInfo:[]
       }      
    },
    methods: {
        navIsPageNum(nav,pageNum) {
            if(nav == pageNum)
                return 'active';
            else
                return '';
        },
        changePage(url) {           
            //子组件触发父组件方法
            this.$emit('someOfPageBlogs',url);
        }
    },
    created() {
        this.pageInfo = this.blogPageInfo;
        //alert(this.pageInfo.pageNum);
    },
    //使用watch对父组件传递过来的值进行监听，实现动态更新
    watch: {
        blogPageInfo() {
            this.pageInfo = this.blogPageInfo;
        }
    }
}
</script>


<style scoped>
</style>
